<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="/vue.js"></script>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    #container{
        width:650px;
        margin:auto;
    }
    ul li{
        width:650px;
        height:40px;
        list-style: none;
        border:1px solid #ccc;
        border-top:0;
        text-align:center;
        padding-top:15px;
        font-size:14px;
    }
    button{
        margin-left:10px;
        background-color:lightblue;
        color:white;
        outline: none;
        border: none;
        padding:4px;
        font-size:12px;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover{
        color:#999;
        background-color: #ccc;
    }
    input{
        width:620px;
        height:20px;
        padding:15px;
        border:1px solid #9b9b9b;
        margin-top:30px;
    }
    #addBtn{
        position: absolute;
        right:250px;
        top:40px;
    }
</style>
<body>
    
    <div id="container">
            <button id="addBtn" @click='add()'>添加</button>
        <ul>
            <input type="text" name="" id="" v-model="value">
            <li v-for='(val,index) in arr'>
                {{val}}
                <button @click='del(index)'>删除</button>
            </li>
        </ul>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#container',
        data(){
            return {
                value:'',
                arr:[
                    '吃饭',
                    '睡觉',
                    '打豆豆',
                ]
            }
        },
        methods:{
            del(index){
                this.arr.splice(index,1);
            },
            add(){
                if(this.value==''){return};
                this.arr.push(this.value);
                this.value='';
            }
        }
    });
</script>
</html>